<div id="result">
<?php echo $this->Session->flash(); ?>
<form method="post" id="additional_fields"  name="additional_fields" action="<?php echo Configure::read('base_url')."add_category/fields/".$category['Category']['id'];?>">
  <!-- begin all content here -->
  <div class="div_header1">Additional fields for <?php echo $category['Category']['category_name']; ?></div>
	<br style="clear:both;">
	<?php if($fields):?>
    <table id="category_table" cellspacing="0" class="tablesorter" width="100%" >
	<thead>
          <tr>            
            <th style="width:auto;"><?php echo _('id');?></th>
            <th style="width:auto;"><?php echo _('Field Label');?></th>
            <th style="width:auto;"><?php echo _('Field Name');?></th>
            <th style="width:auto;"><?php echo _('Field Type');?></th>            
            <th style="width:auto;"><?php echo _('Action');?></th>            
          </tr>
		  </thead>
	<?php $i=0;foreach($fields as $field):
		$class = null;
		if ($i++ % 2 == 0)
		$class = ' class="alt"';		
		?> 
      <tr id="row_<?php echo $i;?>">        
        <td <?php echo $class;?>><?php echo $field['Field']['id'];?></td>
        <td <?php echo $class;?>><?php echo $field['Label']['label_name'];?></td>
        <td <?php echo $class;?>><span id="field_name_<?php echo $field['Field']['id'];?>"><?php echo $field['Field']['field_name'];?></span></td>
        <td <?php echo $class;?>><span id="field_value_<?php echo $field['Field']['id'];?>"><?php echo $field['Field']['field_type'];?></span></td>
        <td <?php echo $class;?>><span id="savebutton_<?php echo $field['Field']['id'];?>">
		<a href="javascript:void(0);" class="clickToEdit" title="Click here to edit <?php echo $field['Field']['field_name'];?>" entryID="<?php echo $field['Field']['id'];?>">Edit</a> | 	
		<a href="javascript:void(0);" class="clickToDelete" rowID="<?php echo $i;?>"  entryID="<?php echo $field['Field']['id'];?>" value="<?php echo $field['Field']['field_name'];?>" title="Cleck here to delete <?php echo $field['Field']['field_name'];?>" >Delete</a>
		</span>
		<span id="showsave_<?php echo $field['Field']['id'];?>"></span>
		</td>
      </tr>	  
	  <?php endforeach;?>
    </table><a href="javascript:void(0);" controller="add_category" action="manage_labels" ElmID="<?php echo $category['Category']['id'];?>" onclick="showPop(this)" style="background:#73AE0B; color:#fff; font-size:14px;text-decoration:none; padding:2px 5px;">Add Labels</a><br />
    <?php endif;?>
		
			<table width="100%" id="add_global_form" border="0" cellspacing="0" cellpadding="0">
				<tr><td colspan="3" class="alt">
					Select from the existing :<?php ksort($labels); echo $this->Form->input('label_id',array('label'=>false,'options'=>$labels)); ?>
				</td></tr>
				<tr>
                <td class="alt" width="300"  valign="middle">
					<input type="hidden" name="data[category_id]" id="CategoryId" value="<?php echo $category['Category']['id']; ?>">
					<?php echo $this->Form->input('field_name',array('label'=>false,'size'=>30,'id'=>'description','class'=>"required", 'title'=>"Enter field name here")); ?>					
				</td>
                <td class="alt" width="15"  valign="middle" style="padding:0;margin:0;"><input type="checkbox" name="data[required]" id="Save" value="Yes" /></td>
				<td class="alt" valign="middle">Required?</td>
				</tr>
				<tr>
				<td class="alt" valign="middle">					
					<table cellpadding="2" cellspacing="0"><tr><td class="alt">Type</td>
					<td class="alt">
						<input type="radio" checked="checked" name="data[field_type]" value="Textbox" onclick="return extraFormShow(this);" />
					</td><td class="alt">Textbox</td>
					<td class="alt">
						<input type="radio" name="data[field_type]" value="Checkbox"  onclick="return extraFormShow(this);" />
					</td><td class="alt">Checkbox</td>
					<td class="alt">
						<input type="radio" name="data[field_type]" value="Dropdown"  onclick="return extraFormShow(this);" /></td>
					<td class="alt">Dropdown</td>
					</tr>
					</table>
				</td>
                <td class="alt" colspan="2"  valign="top" align="right"><input type="submit" style="background:#73AE0B; color:#fff; font-size:14px;" name="Save" id="Save" value="Save" /></td>
              </tr>
			  <tr>
				<td colspan="3" class="alt" id="editForm">
					<table id="checkboxform" style="display:none;">											
						<tr><td class="alt">
							<b>Values: </b><span id="checkboxfieldValue"></span><br />							
							<input name='chk_field_value' type='hidden' size='30' id='checkbox_value' />
							<input size='30' name='checkboxoption' id='checkboxoption' title="Enter checkbox value here" />
							<input onclick="return addCheckboxValue();" type="button" style="background:#73AE0B; color:#fff; font-size:14px;" name="Add" id="Add" value="Add Value" />
						</td></tr>
					</table>				
					<table id="dropdownform" style="display:none;">
						<tr><td class="alt">Please add "Others" with the bracket itself or copy "Others" and paste this into the last additional field. This option will allow seller to add other colors if it&#39;s not predefined.</td></tr>
						<tr><td class="alt">
							<b>Values: </b><span id="spanvalue"></span><br />							
							<input name='dd_field_value' type='hidden' id='dropdown_value' />
							<input size='30' name='dropdownoption' id='dropdownoption' class="" title="Enter drop down value here" />
							<input onclick="return addDropdownValue();" type="button" style="background:#73AE0B; color:#fff; font-size:14px;" name="Add" id="Add" value="Add Value" />
						</td></tr>
					</table>				
				</td>
			  </tr>
            </table>
			
  <div class="div_bottom1"></div>
</form>
</div>
<?php  echo $html->script(array("jquery.min.js","jquery.form.js","jquery.validate.js","jquery.pagination.js","jquery.tablesorter.min.js","jquery.tablednd.js")); ?>	 
 <script type="text/javascript">  
 jQuery(document).ready(function(){
 jQuery("#category_table").tablesorter({headers: { 4:{sorter: false}},sortList: [[0,0]]}); 
 
 var v = jQuery("#additional_fields").validate({
			submitHandler: function(form) {				
				jQuery(form).ajaxSubmit({				
					target: "#result"
				});
			}
		});	
		
	jQuery("#suggest_global").click(function()				
			{
				jQuery("#suggest_global_content").toggle("slow");
			});
			
	jQuery("form#additional_fields a.clickToEdit").click(function()				
		{
			if(jQuery(this).attr('class')=='clickToEdit'){
				var entryID=(jQuery(this).attr("entryID"));
				//var inputValue=jQuery("#add_global_form").html();
				var fieldName=jQuery("#field_name_"+entryID).html();
				
				var hiddencontent=fieldName+'<input type="hidden" id="addfiled_'+entryID+'" value="'+entryID+'" name="data[id]">';
				jQuery("#field_name_"+entryID).html(hiddencontent);
				
				var savebutton='<a href="javascript:void(0);" entryID="'+entryID+'" onclick="cancelForm(this)">Cancel</a>';
				jQuery("span#savebutton_"+entryID).hide().fadeOut("slow");
				jQuery("span#showsave_"+entryID).live("click", cancelForm).html(savebutton);
				
				//jQuery('.required').attr('disabled',true);
				//jQuery('#Save').attr('disabled',true);data: data,
				
				jQuery.ajax({
					type: 'GET',
					url: baseurl+"add_category/createEditForm/"+entryID,
					dataType: 'html',
					success: function(data){
						jQuery("#add_global_form").html(data);
						return false;
					}
				});
				jQuery("form#additional_fields a.clickToEdit").each(function (index,domEle) {
					  jQuery(domEle).removeClass("clickToEdit"); 
					  jQuery(domEle).addClass("clickToCancel"); 
				  });
			}
			else{
				return false;
			}
		});
		
	});
	
	jQuery("form#additional_fields a.clickToDelete").click(function(){
	    rowID= jQuery(this).attr('rowID');
		entryID=jQuery(this).attr('entryID');
		value=jQuery(this).attr('value');
		
		if(confirm('Are you sure you want to delete "'+value+'"?')){
		jQuery.ajax({
			type: 'GET',
			url: baseurl+"add_category/deletefield/"+entryID,
			dataType: 'json',
			success: function(data){
				if(data.message=="Yes")
				{
					jQuery("#flashMessage").hide().fadeOut("slow");
					jQuery("#row_"+rowID).hide().fadeOut("slow");
					jQuery("#checkboxform").hide().fadeOut("slow");
					jQuery("#dropdownform").hide().fadeOut("slow");
					jQuery("#description").val("");
				}
				return false;
			}
		});
		return false;
		}
		else
		return false;
	});
	//Drop down 
	function deleteDropdownValue(param){		
		entryID=jQuery(param).attr('entryID');
		value=jQuery(param).attr('value');
		if(confirm("Are you sure you want to delete"+value+"?")){
		jQuery.ajax({
			type: 'GET',
			url: baseurl+"add_category/deleteDropdownValue/"+entryID+"/"+value,
			dataType: 'html',
			success: function(data){
				jQuery("#fieldValue").html(data);
				return false;
			}
			});
		return false;
		}
		else
		return false;
	}
	
	function  updateDropdownValue(id){
		value1=jQuery("input[name='dropdownoption']").val();
		jQuery.ajax({
			type: 'GET',
			url: baseurl+"add_category/updateDropdownValue/"+id+"/"+value1,
			dataType: 'html',
			success: function(data){
				jQuery("#fieldValue").html(data);
				jQuery("input[name='dropdownoption']").val("");
				return false;
			}
		});
		return false;
	}
	
	function  addDropdownValue(){
		value1=jQuery.trim(jQuery("input[name='dropdownoption']").val());
		value2=jQuery("input[id='dropdown_value']").val();
		
		if(value2){
			var patt1=new RegExp(value1);
			if(patt1.test(value2))
				alert("Duplicate value")
			else
				value=value2+","+value1;
		}else
		value=value1;
		
		jQuery("input[id='dropdown_value']").val(value);		
		jQuery("#spanvalue").html(value);
		jQuery("input[name='dropdownoption']").val("");
		return false;
	}
	//Drop down ends
	//Check box strat
	function deleteCheckboxValue(param){		
		entryID=jQuery(param).attr('entryID');
		value=jQuery(param).attr('value');
		if(confirm("Are you sure you want to delete "+value+"?")){
		jQuery.ajax({
			type: 'GET',
			url: baseurl+"add_category/deletecheckboxvalue/"+entryID+"/"+value,			
			dataType: 'html',
			success: function(data){
				//alert(data);
				jQuery("#checkboxfieldValue").html(data);						
				return false;
			}			
		});
		return false;
		}
		else
		return false;
	}
	
	function  updateCheckboxValue(id){
		value1=jQuery("input[name='checkboxoption']").val();		
		jQuery.ajax({
			type: 'GET',
			url: baseurl+"add_category/updatecheckboxvalue/"+id+"/"+value1,			
			dataType: 'html',
			success: function(data){
				//alert(data);
				jQuery("#checkboxfieldValue").html(data);
				jQuery("input[name='checkboxoption']").val("");		
				return false;
			}			
		});
		return false;		
	}
	
	function addCheckboxValue(){		
		value1=jQuery("input[name='checkboxoption']").val();		
		value2=jQuery("input[id='checkbox_value']").val();
		if(value2){
			var patt1=new RegExp(value1);			
			if(patt1.test(value2))
				alert("Duplicate value")
			else		
			value=value2+", "+value1;
		}else
		value=" "+value1;
		
		jQuery("input[id='checkbox_value']").val(value);		
		jQuery("#checkboxfieldValue").html(value);
		jQuery("input[name='checkboxoption']").val("");
		return false;
	}
	//Check ends
	//Show/hide form for checkbox and dropdown 
	function extraFormShow(param){
		value=(jQuery(param).attr("value"));
		if(value=="Checkbox"){
			//jQuery("#field_value").attr("name","data[field_value]");
			//jQuery("#field_value").addClass("required");
			//jQuery("#checkbox_value").attr("name","");
			//jQuery("#checkbox_value").removeClass("required");
			jQuery("#checkboxform").show().fadeIn("slow");
			jQuery("#dropdownform").hide().fadeOut("slow");				
		}
		else if(value=="Dropdown"){
			//jQuery("#dropdown_value").attr("name","data[field_value]");
			//jQuery("#dropdown_value").addClass("required");
			//jQuery("#field_value").attr("name","");
			//jQuery("#field_value").removeClass("required");
			jQuery("#checkboxform").hide().fadeOut("slow");		
			jQuery("#dropdownform").show().fadeIn("slow");		
		}
		else{
		jQuery("#checkboxform").hide().fadeOut("slow");		
		jQuery("#dropdownform").hide().fadeOut("slow");	
		//jQuery("#description").val("");		
		}		
	}
	
	// edit functions
	function saveEntry(param){		
		//entryID=(jQuery(param).attr("entryID"));
		//boxID="editbox_"+entryID;
		data = jQuery("#additional_fields").serialize();
		//inputValue=jQuery('input[id="'+boxID+'"]').val();
		//jQuery('input[name="old_description"]').val(inputValue);	
		jQuery.ajax({
			type: 'POST',
			url: baseurl+"add_category/editfields/",
			data: data,
			dataType: 'json',
			success: function(data){
				//alert(data.message);
				if(data.message=="No")
				return false;
			}			
		});
		
		cancelForm(param);	
		return false;		
	}	
	
	function cancelForm(param){		
		var entryID=(jQuery(param).attr("entryID"));
		
		//var boxID="editbox_"+entryID;		
		//var inputValue=jQuery('input[name="old_description"]').val();	
		//jQuery("#field_name_"+entryID).html(inputValue);
		jQuery("#addfiled_"+entryID).remove();
		jQuery("span#savebutton_"+entryID).show().fadeIn("slow");		
		jQuery("span#savebutton_"+entryID+" a").attr("class","clickToEdit");		
		jQuery("span#showsave_"+entryID).die("click", cancelForm).text("");
		
		jQuery("form#additional_fields a.clickToCancel").each(function (index,domEle) {					   
					  jQuery(domEle).removeClass("clickToCancel"); 
					  jQuery(domEle).addClass("clickToEdit");
					  
				  });
		jQuery("input[type='radio']").each(function(index,domEle){
			jQuery(domEle).removeAttr("checked");			
		});

		var CategoryId= jQuery("#CategoryId").val();
		jQuery.ajax({
					type: 'GET',
					url: baseurl+"add_category/cancel_form/"+CategoryId,					
					dataType: 'html',
					success: function(data){
						jQuery("#add_global_form").html(data);						
						return false;
					}			
				});
	}
 </script>